<!--
 * @Descripttion: 登录页面
 * @Author: 银河以北
 * @Date: 2021-09-19 12:51:25
 * @LastEditors: 银河以北
 * @LastEditTime: 2022-01-17 20:10:38
-->
<template>
  <div class='app-container'>
    <div class='login-container'>
      <el-card>
        <!-- 标题 -->
        <template #header>
          <div class="card-header">
            <span class='header-title'>银河以北-即时通讯</span>
            <el-popover
              placement="bottom-start"
              title="注意事项"
              :width="200"
              trigger="hover"
            >
              <div>
                <p>1.银河以北-即时通讯（以下简称本系统）暂时只允许通过银河以北博客注册账号登录。</p>
                <p>2.本系统不定期关闭，至于是否开启、何时开启请关注银河以北博客通知</p>
              </div>
              <template #reference>
                <el-icon class='header-icon'>
                  <QuestionFilled />
                </el-icon>
              </template>
            </el-popover>

          </div>
        </template>
        <!-- 主体内容 -->
        <div class='card-container'>
          <div class='login-img'>
            <div><img
                :src="logoImg"
                alt="logo"
                width="100"
              ></div>
          </div>
          <!-- 登录表单 -->
          <div class='login-form'>
            <el-form
              :model="loginForm"
              :rules="loginRules"
              ref='loginFormRef'
            >
              <el-form-item prop='mailbox'>
                <el-input
                  v-model="loginForm.mailbox"
                  autocomplete="off"
                  placeholder="请输入注册邮箱"
                  clearable
                  size="small"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop='password'>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入登录密码"
                  autocomplete="off"
                  clearable
                  size="small"
                  style="width:100%"
                  @keyup.enter.native="login"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  style="width:100%"
                  @click="login"
                >登录</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="info"
                  size="small"
                  style="width:100%"
                  @click="resetForm"
                >重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";

//vuex
import { useStore } from "vuex";

//svg-icon
import { QuestionFilled } from "@element-plus/icons";

//element-plus组件类型
import { ElForm } from "element-plus";

import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "Login",
  components: {
    QuestionFilled,
  },
  setup() {
    //logo图片
    const logoImg = require("@/assets/logo/logo.png");

    //登录表单
    const loginForm = reactive({
      mailbox: "",
      password: "",
    });

    //登录表单验证规则
    const loginRules = {
      mailbox: [
        {
          required: true,
          message: "请输入注册邮箱",
          trigger: "blur",
        },
        {
          pattern:
            /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
          message: "请正确输入邮箱格式",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入登录密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 12,
          message: "密码长度在6到12位哦~",
          trigger: "blur",
        },
      ],
    };

    //表单组件
    const loginFormRef = ref<InstanceType<typeof ElForm>>();

    //vuex
    const store = useStore();

    //全局挂载方法
    const { appContext } = getCurrentInstance() as ComponentInternalInstance;

    //全局提示框
    const notify = appContext.config.globalProperties.$notify;

    //引入路由对象
    const router = useRouter();

    //登录事件
    const login = () => {
      loginFormRef.value?.validate((valid) => {
        if (valid) {
          const data = Object.assign({}, loginForm);
          data.password = appContext.config.globalProperties.$utils.md5(
            data.password
          );
          store.dispatch("Login", data).then((res) => {
            if (res.code == 200) {
              router.replace("/chat");
              setTimeout(() => {
                notify({
                  title: "成功",
                  message: "你已登录成功，欢迎回来",
                  type: "success",
                });
              }, 500);
            }
          });
        } else {
          return;
        }
      });
    };

    //重置登录表单
    const resetForm = () => {
      loginFormRef.value?.resetFields();
    };
    return {
      logoImg, //logo 图片

      loginForm, //登录表单

      loginRules, //登录表单验证规则

      loginFormRef, //表单组件

      login, //登录事件

      resetForm, //重置登录表单
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../assets/img/login/login-bg.png");

  .login-container {
    width: 300px;

    .card-header {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-title {
        color: $title-color;
      }

      .header-icon {
        cursor: pointer;
      }
    }

    .card-container {
      width: 100%;

      .login-img {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
      }

      .login-form {
        @extend .login-img;
      }
    }
  }
}
</style>